'use strict'
import React, {
    Component
} from 'react'
import {
    Link
} from 'react-router'

import Header from './Common/Header'
import LoadingBox from './Common/LoadingBox'

import {
    HttpService,
    getLocalTime,
    Tips,
    getClassList,
    localData
} from '../Tools'

export default class Score extends Component {
    constructor(props) {
        super(props);
        this.page = 1;
        this.pagesize = 5;
        this.toBottom = 100;
        this.state = {
            dataList: [],
            classList: [],
            subjectList: [],
            classid: '',
            subjectid: '',
            dataLoad: 1,
            dataNull: 0
        }
    }
    componentWillMount() {
        if (sessionStorage.classid) {
            sessionStorage.scoreclassid = sessionStorage.classid
        } else {
            getClassList(classList => {
                if (!sessionStorage.scoreclassid)
                    sessionStorage.scoreclassid = classList[0].id
                this.setState({
                    classList
                });
            })
        }
        this.setState({
            classid: this.classid
        });
        this.getSubjectList();
    }
    componentDidMount() {
        document.getElementById('scoresbj').value = sessionStorage.scoresubjectid
        if (document.getElementById('scorecls'))
            document.getElementById('scorecls').value = sessionStorage.scoreclassid
        window.onscroll = () => {
            const {
                dataLoad,
                dataEnd,
                dataNull
            } = this.state;
            if (dataLoad == 1 || dataEnd == 1 || dataNull == 1)
                return;
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            if (document.body.clientHeight - window.innerHeight - scrollTop <= this.toBottom) {
                this.page++;
                this.getList();
            }
        }
    }

    //加载科目列表
    getSubjectList() {
        HttpService.query({
            url: '/jxt-score/actTblStudentTestPhone.do',
            data: {
                jybTicket: sessionStorage.ticket,
                method: 'ajaxGetkmListJson'
            },
            async: false,
            success: (res => {
                if (res.length > 0) {
                    if (!sessionStorage.scoresubjectid)
                        sessionStorage.scoresubjectid = res[0].name
                    this.setState({
                        subjectList: res,
                        subjectid: res[0].name
                    });
                    this.getList();
                    return;
                }
                Tips('未获取到课程类型');
            })
        })
    }
    //获取数据列表
    getList() {
        // console.log(`classId:${sessionStorage.scoreclassid}`);
        // console.log(`subjectid:${sessionStorage.scoresubjectid}`);
        this.setState({
            dataLoad: 1,
            dataNull: 0
        });
        let course = sessionStorage.scoresubjectid;
        let data = {
            jybTicket: sessionStorage.ticket,
            method: 'ajaxGetTestByClassIdAndCourse',
            classId: sessionStorage.scoreclassid
        };
        if (course == '统考成绩') {
            data.method = 'ajaxGetTestTypeByClassId'
        } else {
            data.course = course
        }
        HttpService.query({
            url: '/jxt-score/ajaxMobileScore.do',
            data,
            success: (res => {
                this.setState({
                    dataLoad: 0
                });
                if (res.code == 0) {

                    let gatData = res.r.testList || res.r.testTypeList;
                    let newData = this.state.dataList.concat(gatData);
                    this.setState({
                        dataList: newData
                    });
                    if (res.r.totalRecordCount == this.pagesize) {
                        this.setState({
                            dataEnd: 1
                        });
                    } else if (gatData.length < this.pagesize) {
                        this.setState({
                            dataEnd: 1
                        });
                        if (newData.length == 0) {
                            this.setState({
                                dataEnd: 0,
                                dataNull: 1
                            });
                        }
                    }
                    return;
                }
                Tips(res.msg);
            })
        })
    }

    //选择班级
    sltClass(e) {
        sessionStorage.scoreclassid = e.currentTarget.value
        this.setState({
            dataList: [],
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0,
            classid: e.currentTarget.value
        })
        this.getList();
    }
    //选择科目
    sltSubject(e) {
        sessionStorage.scoresubjectid = e.currentTarget.value
        if (document.querySelector('.h_title span')) {
            let obj = e.currentTarget
            document.querySelector('.h_title span').innerHTML = obj.options[obj.selectedIndex].text
        }
        this.setState({
            dataList: [],
            dataLoad: 1,
            dataEnd: 0,
            dataNull: 0,
            subjectid: e.currentTarget.value
        })
        this.getList();
    }

    render() {
        const {
            dataLoad,
            dataNull,
            dataList,
            dataEnd,
            classList,
            subjectList,
            classid
        } = this.state
        const dataTagList = dataList.map((item, index) => {
            let tongkao = 'false'
            if (item.fldCourse)
                tongkao = 'true'
            return (
                <Link className="table_list" id='pjb_scorelist' to={'/ScoreDetail/' + item.id + '/' + tongkao+'/'+sessionStorage.scoreclassid}>
                    <div className="table_title">{item.fldTestTitle}</div>
                    <div className="table_info" id='pjb_tbscore'>
                        <span className="score_time">考试时间：<span>{(getLocalTime(item.fldTestTime).split(' ')[0])}</span>
                        </span>
                        <span className="score_subject">科目：<span>{item.fldCourseName || item.fldCourse}</span>
                        </span>
                    </div>
                    <div className="score_table">
                        <ul className="score_title">
                            <li>平均分</li>
                            <li>最高分</li>
                            <li>最低分</li>
                            <li className="li_right">中位分</li>
                        </ul>
                        <ul className="score_number">
                            <li>{item.fldAverageGrade || item.fldClassAvgScore}</li>
                            <li>{item.fldTopGrade || item.fldClassMaxScore}</li>
                            <li>{item.fldLowestGrade || item.fldClassMinScore || 0}</li>
                            <li className="li_right">{item.fldMiddleGrade || item.fldClassMiddleScore}</li>
                        </ul>
                    </div>
                </Link>
            )
        })
        const classTagList = classList.map((item, index) => {
            return (
                <option value={item.id}>{item.name}</option>
            )
        })
        const subjectTagList = subjectList.map((item, index) => {
            return (
                <option value={item.name}>{item.name}</option>
            )
        })
        return (
            <div className='score'>
                <Header title={!sessionStorage.classid
                    ? '成绩查询'
                    : null} appLink='1'>
                    <span className={subjectList.length==1?'sigle':''} >{sessionStorage.scoresubjectid}</span><br/>
                    <select dir="rtl" className='sltbox' id='scoresbj' onChange={this.sltSubject.bind(this)}>
                        {subjectTagList}
                    </select>
                </Header>
                {!sessionStorage.classid
                    ? <div>
                            <label className="lt_hw_list lt_delivery_time">
                                <span className="title">班级</span>
                                <div className="hw_right">
                                    <select dir="rtl" id='scorecls' onChange={this.sltClass.bind(this)}>
                                        {classTagList}
                                    </select>
                                </div>
                                <span className="input_right_img"></span>
                            </label>
                            <label className="lt_hw_list lt_subject" style={{
                                marginTop: '1px'
                            }}>
                                <span className="title">科目</span>
                                <div className="hw_right">
                                    <select dir="rtl" id='scoresbj' onChange={this.sltSubject.bind(this)}>
                                        {subjectTagList}
                                    </select>
                                </div>
                                <span className="input_right_img"></span>
                            </label>
                        </div>
                    : ''}
                {dataTagList}
                <LoadingBox dataLoad={dataLoad} dataNull={dataNull} dataEnd={dataEnd}/>
            </div>
        )
    }
}
